<template>
	<div class="play" @click="$emit('handler')">
		<span class="six"><Icon type="plays"/></span>
		<span class="tips">稍后再看</span>
	</div>
</template>

<script>
</script>

<style scoped lang="less">
.play{
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 22px;
	height: 22px;
	background-color: rgba(0,0,0,.4);
	border-radius: 2px;
	color: #eee;
	opacity: 0;
	transition: opacity .3s;
	z-index: 2;
	&:hover{
		.tips{
			opacity: 1;
			z-index: 20;
			padding: 4px 8px;
			top: -30px;
		}
	}
	.tips{
		position: absolute;
		top: -32px;
		left: 50%;
		transform: translateX(-50%);
		line-height: 18px;
		padding: 6px 12px;
		font-size: 12px;
		color: #fff;
		background-color: rgba(0,0,0,.8);
		border-radius: 4px;
		white-space: nowrap;
		z-index: -1;
		opacity: 0;
		transition: opacity .5s, padding .2s, top .2s;
	}
}
</style>
